<!-- 货品信息详情界面 -->
<template>
    <!--基本信息-->
    <div class="white-container">
        <!--头部-->
        <div class="header-row">
            <h3 class="title">{{ procform.name }}&nbsp;{{ procform.code }}</h3>
            <div class="btn-group">
                <el-button @click="ShowUpdate">编辑</el-button>
                <el-button @click="ShowDelete">删除</el-button>
                <el-button @click="toggleStatus">{{ procform.status === '启用' ? '停用' : '启用' }}</el-button>
                <el-button @click="showPrintDialog">打印</el-button>
                <el-dropdown>
                    <el-button>更多</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>入库</el-dropdown-item>
                            <el-dropdown-item>出库</el-dropdown-item>
                            <el-dropdown-item>进货</el-dropdown-item>
                            <el-dropdown-item>销售</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <hr style="border:1px solid #ccd0d4;"/>
        <div class="info-main-row">
             <!--轮播图片-->
            <div style="width: 300px; margin-left: 20px;">
                <el-carousel indicator-position="outside" v-if="imglist.length > 0">
                    <el-carousel-item v-for="(item, index) in imglist" :key="index">
                        <el-image :src="item.url" fit="cover"/>
                    </el-carousel-item>
                </el-carousel>
                <div v-else style="height: 250px; display: flex; align-items: center; justify-content: center; color: #aaa; background: #f5f5f5; border-radius: 8px;">
                    暂无图片
                </div>
                <div style="width: 300px;height: 80px;border: 1px #f1f1f1 solid;">
                    <div class="stock-bar">
                        <div class="stock-item">
                            <div class="stock-value">{{ procform.inventory }}</div>
                            <div class="stock-label">总库存</div>
                        </div>
                        <div class="stock-item">
                            <div class="stock-value">{{ procform.inventorymoney }}</div>
                            <div class="stock-label">库存总金额</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧信息-->
            <div style="flex: 1;">
                <!-- 价格条 -->
                <div style="height: 50px;background-color: #eaf6f0;display: flex;align-items: center;margin-bottom: 30px;">
                    入库参考价：
                    <span style="color: red; font-size: 20px; font-weight: bold;margin-right: 60px;">{{ procform.inprice }}</span>
                    &nbsp;&nbsp;
                    出库参考价：
                    <span style="color: red; font-size: 20px; font-weight: bold;">{{ procform.outprice }}</span>
                </div>
                <!--信息-->
                <el-row style="text-align: left;margin-bottom: 30px;">
                    <el-col :span="7">
                        货品类型：<span style="color: #aaa;font-size: 14px;">{{procform.typename}}</span>
                    </el-col>
                    <el-col :span="6">
                        规格型号：<span style="color: #aaa;font-size: 14px;">{{procform.model}}</span>
                    </el-col>
                    <el-col :span="11">
                        单位/条码：<span style="color: #aaa;font-size: 14px;">{{unitform.unit}}({{unitform.barcode}})
                            <template v-for="(item, idx) in auxiliaryUnits" :key="idx">
                                 、{{ item.unit }}<span v-if="item.barcode">（{{ item.barcode }}）</span>
                            </template>
                        </span>
                    </el-col>
                </el-row>
                <el-row style="text-align: left;margin-bottom: 30px;" >
                    <el-col :span="7">
                        保质期管理：<span style="color: #aaa;font-size: 14px;">{{procform.is_datamanagement}}</span>
                    </el-col>
                    <el-col :span="6">
                        保质期：<span style="color: #aaa;font-size: 14px;">{{procform.expirationdate}}</span>
                    </el-col>
                    <el-col :span="11">
                        预警天数：<span style="color: #aaa;font-size: 14px;">{{unitform.warningdays}}天</span>
                    </el-col>
                </el-row>
                <el-row style="text-align: left;margin-bottom: 30px;">
                    <el-col :span="7">
                        状态：<span style="color: #aaa;font-size: 14px;">{{procform.status}}</span>
                    </el-col>
                    <el-col :span="6">
                        排序：<span style="color: #aaa;font-size: 14px;">{{procform.sort}}</span>
                    </el-col>
                </el-row>
                <el-row style="text-align: left;margin-bottom: 30px;">
                    <el-col :span="7">
                        备注：<span style="color: #aaa;font-size: 14px;">{{procform.remark}}</span>
                    </el-col>
                </el-row>
                <hr/>
                <el-row style="text-align: left;margin-top: 30px;" >
                    <el-col :span="6">
                        创建人：<span style="color: #aaa;font-size: 14px;">{{procform.createname}}</span>
                    </el-col>
                    <el-col :span="6">
                        创建时间：<span style="color: #aaa;font-size: 14px;">{{procform.createtime}}</span>
                    </el-col>
                    <el-col :span="6">
                        更新人：<span style="color: #aaa;font-size: 14px;">{{procform.updatename}}</span>
                    </el-col>
                    <el-col :span="6">
                        更新时间:<span style="color: #aaa;font-size: 14px;">{{procform.updatetime}}</span>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <!--相关信息-->
    <div class="white-container">
        <el-tabs class="demo-tabs" style="margin-left: 20px;" v-model="activeTab">
            <el-tab-pane label="其他信息" name="first">
                <div style="text-align: left;">
                    <b style="font-size: 16px;">附件</b>
                    <div v-if="filelist.length === 0" style="color: #aaa; margin-top: 10px;">暂无附件</div>
                        <div v-else style="margin-top: 10px;">
                        <div v-for="(file, idx) in filelist" :key="idx" style="margin-bottom: 8px;">
                            <a :href="file.url" target="_blank" style="color: green; font-size: 15px; text-decoration: none;">
                            {{ file.name }}
                            </a>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="库存信息" name="second">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="stockData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" />
                        <el-table-column type="index" label="序号" width="80"/>
                        <el-table-column prop="wh_name" label="仓库名称"  />
                        <el-table-column prop="slot_name" label="库位名称"  />
                        <el-table-column prop="stk_hand_num" label="库存数量"  />
                        <el-table-column prop="stk_total" label="库存金额"  >
                            <template #default="scope">
                                {{ scope.row.stk_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="proc_max" label="货品上限" />
                        <el-table-column prop="proc_min" label="货品下限"/>
                    </el-table>
                </div>
                <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">库存总数量: <b style="color: #e6a23c;">{{ stockTotalNum }}</b></span>
                            <span class="summary-item">库存总金额: <b style="color: #e6a23c;">{{ stockTotalAmount }}</b></span>
                        </div>
                    </div>
            </el-tab-pane>
            <el-tab-pane label="入库记录" name="third">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="instockData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="in_code" label="入库单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowInStockInfo(scope.row)">{{ scope.row.in_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="in_type" label="入库类型" width="150" />
                        <el-table-column prop="in_date" label="入库日期"  width="200"/>
                        <el-table-column prop="wh_name" label="仓库名称" width="150" />
                        <el-table-column prop="in_num" label="入库数量" width="150" />
                        <el-table-column prop="in_total" label="入库金额" width="150">
                            <template #default="scope">
                                {{ scope.row.in_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="in_user" label="经办人" width="120"/>
                        <el-table-column prop="create_name" label="制单人" width="120"/>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">入库总数量: <b style="color: #e6a23c;">{{ instockTotalNum }}</b></span>
                            <span class="summary-item">入库总金额: <b style="color: #e6a23c;">{{ instockTotalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="出库记录" name="fourth">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="outstockData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="out_code" label="出库单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowOutStockInfo(scope.row)">{{ scope.row.out_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="out_type" label="出库类型" width="150" />
                        <el-table-column prop="out_date" label="出库日期"  width="200"/>
                        <el-table-column prop="wh_name" label="仓库名称" width="150" />
                        <el-table-column prop="out_num" label="出库数量" width="150" />
                        <el-table-column prop="out_total" label="出库金额" width="150">
                            <template #default="scope">
                                {{ scope.row.out_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="out_user" label="经办人" width="120"/>
                        <el-table-column prop="create_name" label="制单人" width="120"/>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">出库总数量: <b style="color: #e6a23c;">{{ outstockTotalNum }}</b></span>
                            <span class="summary-item">出库总金额: <b style="color: #e6a23c;">{{ outstockTotalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="盘点记录" name="fifth">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="checkData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column fixed type="index" label="序号" width="60"/>
                        <el-table-column fixed label="盘点单号" width="200px">
                            <template #default="scope">
                                <span style="color: green;cursor: pointer;" @click="ShowCheckInfo(scope.row)">{{ scope.row.ic_code }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wh_name" label="仓库名称" width="200px"></el-table-column>
                        <el-table-column prop="ic_type" label="盘点类型"></el-table-column>
                        <el-table-column prop="start_time" label="盘点开始时间" width="200px"></el-table-column>
                        <el-table-column prop="end_time" label="盘点结束时间" width="200px"></el-table-column>
                        <el-table-column prop="check_num" label="盘点数量" width="120px"></el-table-column>
                        <el-table-column prop="checkprofit_num" label="盘盈数量" width="120px">
                            <template #default="scope">
                                <span style="color: #67C23A;">{{ scope.row.checkprofit_num }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checklosses_num" label="盘亏数量" width="120px">
                            <template #default="scope">
                                <span style="color: #F56C6C;">{{ scope.row.checklosses_num }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkprofit_total" label="盘盈金额" width="120px">
                            <template #default="scope">
                                <span style="color: #67C23A;">{{ scope.row.checkprofit_total ? Number(scope.row.checkprofit_total).toFixed(2) : '0.00' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checklosses_total" label="盘亏金额" width="120px">
                            <template #default="scope">
                                <span style="color: #F56C6C;">{{ scope.row.checklosses_total ? Number(scope.row.checklosses_total).toFixed(2) : '0.00' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ic_user" label="经办人"></el-table-column>
                        <el-table-column prop="create_name" label="制单人"></el-table-column>
                        <el-table-column prop="create_time" label="制单时间" width="200px"></el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="调拨记录" name="sixth">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="allotData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column fixed type="index" label="序号" width="60"/>
                        <el-table-column fixed label="调拨单号" width="200px">
                            <template #default="scope">
                                <span style="color: green;cursor: pointer;" @click="ShowAllotInfo(scope.row)">{{ scope.row.al_code }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed prop="al_date" label="调拨申请日期" width="200"></el-table-column>
                        <el-table-column prop="al_type" label="调拨类型" width="120"></el-table-column>
                        <el-table-column prop="out_wh_name" label="调出仓库" width="100"></el-table-column>
                        <el-table-column prop="in_wh_name" label="调入仓库" width="130"></el-table-column>
                        <el-table-column prop="al_num" label="调拨数量" width="120"></el-table-column>
                        <el-table-column prop="al_total" label="调拨金额" width="120">
                            <template #default="scope">
                                {{ scope.row.al_total ? Number(scope.row.al_total).toFixed(2) : '0.00' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="al_user" label="经办人" width="120"></el-table-column>
                        <el-table-column prop="create_name" label="制单人" width="120"></el-table-column>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                        <el-table-column prop="approver_name" label="审核人" width="200"></el-table-column>
                        <el-table-column prop="approver_time" label="审核时间" width="200"></el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="进货记录" name="seventh">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="purData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="pur_code" label="进货单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowPurchaseInfo(scope.row)">{{ scope.row.pur_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pur_date" label="进货日期" width="200" />
                        <el-table-column prop="sup_name" label="供应商"  width="150"/>
                        <el-table-column prop="sup_linkman" label="联系人" width="150" />
                        <el-table-column prop="sup_linkphone" label="联系方式" width="150" />
                        <el-table-column prop="pur_depName" label="进货部门" width="150" />
                        <el-table-column prop="pur_userName" label="进货人" width="120"/>
                        <el-table-column prop="pur_num" label="货品数量" width="120"/>
                        <el-table-column prop="pur_total" label="货品金额" width="150">
                            <template #default="scope">
                                {{ scope.row.pur_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_name" label="制单人" width="150"></el-table-column>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                        <el-table-column prop="approver_name" label="审核人" width="150"></el-table-column>
                        <el-table-column prop="approver_time" label="审核时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">进货总数量: <b style="color: #e6a23c;">{{ purTotalNum }}</b></span>
                            <span class="summary-item">进货总金额: <b style="color: #e6a23c;">{{ purTotalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="销售记录" name="eighth">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="saleData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="sale_code" label="销售单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowSaleInfo(scope.row)">{{ scope.row.sale_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sale_date" label="销售日期" width="200" />
                        <el-table-column prop="cust_name" label="客户"  width="150"/>
                        <el-table-column prop="cust_linkman" label="联系人" width="150" />
                        <el-table-column prop="cust_linkphone" label="联系方式" width="150" />
                        <el-table-column prop="sale_depName" label="销售部门" width="150" />
                        <el-table-column prop="sale_userName" label="销售人" width="120"/>
                        <el-table-column prop="sale_num" label="货品数量" width="120"/>
                        <el-table-column prop="sale_total" label="货品金额" width="150">
                            <template #default="scope">
                                {{ scope.row.sale_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_name" label="制单人" width="150"></el-table-column>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                        <el-table-column prop="approver_name" label="审核人" width="150"></el-table-column>
                        <el-table-column prop="approver_time" label="审核时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">销售总数量: <b style="color: #e6a23c;">{{ saleTotalNum }}</b></span>
                            <span class="summary-item">销售总金额: <b style="color: #e6a23c;">{{ saleTotalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>


    <!-- 底部操作栏 -->
    <div class="action-bar">
        <el-button @click="Close">关闭</el-button>
    </div>

    <!--删除模态框-->
    <el-dialog v-model="DeleteialogVisible" width="400" style="text-align: left;"  align-center>
        <span>确定删除该货品吗?</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-on:click="DeleteialogVisible = false">取消</el-button>
                <el-button type="primary" @click="Delete()">确定</el-button>
            </div>
        </template>
    </el-dialog>

     <!--打印模态框-->
     <el-dialog v-model="printDialogVisible" width="400">
            <div id="print-area" style="display: flex; align-items: center;">
                <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
                    <QrcodeVue :value="procform.code" :size="100" />
                    <span style="color: red; margin-top: 8px;">{{ procform.code }}</span>
                </div>
                    <table border="1" style="border-collapse: collapse; width: 220px;">
                        <thead>
                            <tr>
                                <td>货品名称</td>
                                <td>{{ procform.name }}</td>
                            </tr>
                            <tr>
                                <td>货品类型</td>
                                <td>{{ procform.typename }}</td>
                            </tr>
                            <tr>
                                <td>规格型号</td>
                                <td>{{ procform.model }}</td>
                            </tr>
                        </thead>
                    </table>
            </div>
            <template #footer>
                <el-button class="no-print" @click="printDialogVisible = false">取消</el-button>
                <el-button class="no-print" type="primary" @click="handlePrint">打印</el-button>
            </template>
    </el-dialog>
</template>
  
<script>
import {ref,reactive,onMounted,computed} from 'vue';
import http from '../auth/index';
import { ElMessage,ElMessageBox } from 'element-plus'; //提示信息
import { useRoute,useRouter  } from 'vue-router';//路由
export default {
    setup(){

        const route = useRoute();//路由（获取参数）
        const router = useRouter();//路由（实现跳转）
        //货品传过来的ID与编号
        const productid = route.params.productid;
        const productcode=route.params.productcode;
        //当前用户信息
        const user = JSON.parse(sessionStorage.getItem("user"));

        //日期转换格式
        function formatDateTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }

        //货品信息
        const procform=reactive({
            id:"",
            code:"",
            name:"",
            typeid:"",
            typename:"",
            model:"",
            inprice:"",
            outprice:"",
            sort:"",
            status:"0",
            is_datamanagement:"",
            expirationdate:"",
            warningdays:0,
            remark:"",
            createname:"",
            createtime:"",
            updatename:"",
            updatetime:"",
            inventory:"",
            inventorymoney:"",
        })

        //主单位数据
        const unitform=reactive({
            is_enableMultiUnit:false,
            unit:"",
            barcode:"",
        })

         // 辅助单位数据
         const auxiliaryUnits = ref([
            {
                unit: '',
                num: '',
                barcode: ''
            }
        ]);

        //图片和附件
        const imglist = ref([])
        const filelist = ref([])

        // 控制活动标签
        const activeTab = ref('second');

        //入库记录
        const instockData = ref([]);
        //出库记录
        const outstockData = ref([]);
        //进货记录
        const purData = ref([]);
        //销售记录
        const saleData = ref([]);
        //盘点记录
        const checkData = ref([]);
        //调拨记录
        const allotData = ref([]);
        //库存
        const stockData = ref([]);

        //#region 查询对应信息
        function Select(){
            //查询货品信息
            http.get("/Product/GetProductById?id="+productid)
            .then(res=>{
                procform.code=res.data.proc_code,
                procform.name=res.data.proc_name,
                procform.typeid=res.data.type_id,
                procform.typename=res.data.type_name,
                procform.model=res.data.proc_model,
                procform.inprice=Number(res.data.instock_price).toFixed(2),
                procform.outprice=Number(res.data.outstock_price).toFixed(2),
                procform.sort=res.data.proc_sort,
                procform.status=res.data.proc_status==0?"启用":"禁用",
                procform.is_datamanagement=res.data.is_datamanagement==0?"开启":"关闭",
                procform.expirationdate=res.data.proc_expirationdate,
                procform.warningdays=res.data.proc_Warningdays,
                procform.remark=res.data.remark,
                procform.inventory = res.data.proc_inventory || 0,
                procform.inventorymoney=Number(res.data.proc_inventory_money).toFixed(2),
                procform.createname=res.data.create_name,
                procform.createtime=formatDateTime(new Date(res.data.create_time)),
                procform.updatename=res.data.update_name,
                procform.updatetime = res.data.update_time ? formatDateTime(new Date(res.data.update_time)) : "";
                unitform.unit=res.data.proc_primary_unit,
                unitform.barcode=res.data.proc_primary_barcode
            })

            //查询货品图片
            http.get("/ProductImg/GetImgByPId?procid="+productid)
            .then(res=>{
                imglist.value=res.data.map(item=>{
                    return {
                        url:item.proc_img
                    }
                })
            })
            
            //查询货品附件
            http.get("/PublicFile/GetPublicFileBy?type=货品&code="+productcode)
            .then(res=>{
                console.log(res.data)
                filelist.value=res.data.map(item=>{
                    return {
                        name: item.title,
                        url:item.file_name
                    }
                })
            })

            //查询辅助单位
            http.get("/ProductUnit/GetUnitByPid?procid=" + productid)
            .then(res => {
                auxiliaryUnits.value = res.data.map(item => ({
                    unit: item.proc_auxiliary_unit,
                    barcode: item.proc_auxiliary_barcode,
                    num: item.proc_auxiliary_num
                }));
            })

            //查询入库记录
            http.get("/Instock_h/GetAllInstock_h?procid=" + productid).then(res=>{
                instockData.value = res.data.map(item=>{
                    return {
                        ...item,
                        in_date:formatDateTime(new Date(item.in_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询出库记录
            http.get("/Outstock_h/GetAllOutstock_h?procid=" + productid).then(res=>{
                outstockData.value = res.data.map(item=>{
                    return {
                        ...item,
                        out_date:formatDateTime(new Date(item.out_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询进货记录
            http.get("/Purchase_h/GetAllPurchase_hBypid?procid=" + productid).then(res=>{
                purData.value = res.data.map(item=>{
                    return {
                        ...item,
                        pur_date:formatDateTime(new Date(item.pur_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询销售记录
            http.get("/Sale_h/GetAllSale_hBypid?procid=" + productid).then(res=>{
                saleData.value = res.data.map(item=>{
                    return {
                        ...item,
                        sale_date:formatDateTime(new Date(item.sale_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询盘点记录
            http.get("/Check_h/GetByPid?procid=" + productid).then(res=>{
                checkData.value = res.data.map(item=>{
                    return {
                        ...item,
                        start_time:formatDateTime(new Date(item.start_time)),
                        end_time:formatDateTime(new Date(item.end_time)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询调拨记录
            http.get("/Allot_h/GetByPid?procid=" + productid).then(res=>{
                allotData.value = res.data.map(item=>{
                    return {
                        ...item,
                        al_date:formatDateTime(new Date(item.al_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });
            //查询库存
            http.get("/Stock/GetByPid?procid=" + productid).then(res=>{
                stockData.value = res.data;
                console.log("库存数据")
                console.log(res.data)
            });
        }
        //#endregion


        //关闭
        function Close(){
            router.back();
        }


        //#region 跳转修改页面

         function ShowUpdate(){
            //传当前对应货品Id过去
            router.push({
                name:"productupdate",
                params:{
                    productid:productid,
                    productcode:productcode,
                }
            })
        }
        //#endregion


        //#region 删除

            //删除模态框
            const DeleteialogVisible=ref(false);
            //删除模态框
            function ShowDelete(){
                DeleteialogVisible.value=true;
            }
            function Delete(){
                http.put("/Product/DeleteProduct?id="+productid)
                .then(res=>{
                    if(res.data>0){
                        ElMessage({
                            message: '删除成功.',
                            type: 'success',
                        })
                        DeleteialogVisible.value=false;
                        router.push("../../product");
                    }else{
                        ElMessage.error('删除失败.')
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }

        //#endregion

        //#region 切换状态
        function toggleStatus() {
            // 目标状态：如果当前是启用，目标就是禁用（1）；否则目标是启用（0）
            const newStatus = procform.status === '启用' ? 1 : 0;
            http.put(`/Product/UpdateStatus?procid=${productid}&status=${newStatus}`)
                .then(res => {
                    if (res.data > 0) {
                        ElMessage.success('状态更新成功');
                        Select(); // 重新拉取数据刷新状态
                    } else {
                        ElMessage.error('状态更新失败');
                    }
                })
                .catch(() => {
                    ElMessage.error('请求失败');
                });
        }
        //#endregion

        //#region 打印
        const printDialogVisible = ref(false);
        function showPrintDialog() {
            printDialogVisible.value = true;
        }
        function handlePrint() {
            window.print();
        }
        //#endregion


        //#region 跳转详情页面
        //跳转入库记录详情页面
        function ShowInStockInfo(row) {
            router.push({ name: "instockinfo", params: { instockid: row.in_id, instockcode: row.in_code } });
        }
        //跳转出库记录详情页面
        function ShowOutStockInfo(row) {
            router.push({ name: "outstockinfo", params: { outstockid: row.out_id, outstockcode: row.out_code } });
        }
        //跳转进货记录详情页面
        function ShowPurchaseInfo(row) {
            router.push({ name: "purchaseinfo", params: { purid: row.pur_id, purcode: row.pur_code } });
        }
        //跳转销售记录详情页面
        function ShowSaleInfo(row) {
            router.push({ name: "saleinfo", params: { saleid: row.sale_id, salecode: row.sale_code } });
        }

        //跳转调拨记录详情页面
        function ShowAllotInfo(row) {
            router.push({ name: "allocationdetail", query: { id: row.al_id, code: row.al_code } });
        }

        //跳转盘点记录详情页面
        function ShowCheckInfo(row) {
            router.push({ name: "checkinfo", params: { checkid: row.ic_id, checkcode: row.ic_code } });
        }
        //#endregion

        // 入库合计
        const instockTotalNum = computed(() => instockData.value.reduce((sum, item) => sum + Number(item.in_num), 0));
        const instockTotalAmount = computed(() => instockData.value.reduce((sum, item) => sum + Number(item.in_total), 0).toFixed(2));
        // 出库合计
        const outstockTotalNum = computed(() => outstockData.value.reduce((sum, item) => sum + Number(item.out_num), 0));
        const outstockTotalAmount = computed(() => outstockData.value.reduce((sum, item) => sum + Number(item.out_total), 0).toFixed(2));
        // 进货合计
        const purTotalNum = computed(() => purData.value.reduce((sum, item) => sum + Number(item.pur_num), 0));
        const purTotalAmount = computed(() => purData.value.reduce((sum, item) => sum + Number(item.pur_total), 0).toFixed(2));
        // 销售合计
        const saleTotalNum = computed(() => saleData.value.reduce((sum, item) => sum + Number(item.sale_num), 0));
        const saleTotalAmount = computed(() => saleData.value.reduce((sum, item) => sum + Number(item.sale_total), 0).toFixed(2));
        
        // 添加库存合计计算属性
        const stockTotalNum = computed(() => stockData.value.reduce((sum, item) => sum + Number(item.stk_hand_num), 0));
        const stockTotalAmount = computed(() => stockData.value.reduce((sum, item) => sum + Number(item.stk_total), 0).toFixed(2));

        //挂载
        onMounted(() => {
            Select();
        });

        return{
            Close,
            imglist,
            filelist,
            user,
            procform,
            unitform,
            auxiliaryUnits,
            formatDateTime,
            activeTab,
            ShowUpdate,
            DeleteialogVisible,
            ShowDelete,
            Delete,
            toggleStatus,
            printDialogVisible,
            showPrintDialog,
            handlePrint,
            instockData,
            outstockData,
            purData,
            saleData,
            ShowInStockInfo,
            ShowOutStockInfo,
            ShowPurchaseInfo,
            ShowSaleInfo,
            instockTotalNum,
            instockTotalAmount,
            outstockTotalNum,
            outstockTotalAmount,
            purTotalNum,
            purTotalAmount,
            saleTotalNum,
            saleTotalAmount,
            allotData,
            checkData,
            ShowAllotInfo,
            ShowCheckInfo,
            stockData,
            stockTotalNum,
            stockTotalAmount
        }
    }
}
</script>
  
<style scoped>
    /* 白色圆角容器 - 核心样式 */
    .white-container {
        background: white;
        border-radius: 12px;
        margin-bottom: 50px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        width: 75%;
    }

    /* 底部操作栏自适应 */
    .action-bar {
        position: fixed;
        bottom: 0;
        right: 0.5%; /* 与表单右侧对齐 */
        left: 210px; /* 与菜单栏宽度一致 */
        background: white;
        border-top: 1px solid #e6e6e6;
        padding: 15px;
        text-align: right;
    }

    .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
    }

    .title {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
    }

    .btn-group > .el-button {
        margin-left: 10px;
    }

    .stock-bar {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 80px; /* 两列间距可调整 */
        margin: 20px 0;
    }

    .stock-item {
        text-align: center;
    }

    .stock-value {
        font-size: 22px;
        font-weight: bold;
        color: #222;
    }

    .stock-label {
        color: #888;
        font-size: 14px;
        margin-top: 4px;
    }
    .info-main-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start; /* 顶部对齐 */
        gap: 30px; /* 左右间距，可根据需要调整 */
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    .summary-row > span {
        font-weight: bold;
    }

    .summary-item {
        margin-left: 25px;
        color: #606266;
    }

    .summary-item > span {
        font-weight: bold;
    }
    
    @media print {
        .no-print {
            display: none !important;
        }
    }
</style>